<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage存储</title>
</head>
<body>
<h3>localStorage存储</h3>
<p>
    作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在 <br>
    特性： <br>
    可以多窗口（页面）共享（同一浏览器可以共享） <br>
    以键值对的形式存储使用
</p>
<hr>

<h3>语法</h3>
<p>
    <strong>存储数据：</strong> <br>
    localStorage.setItem(key, value) <br>
    <strong>获取数据：</strong> <br>
    localStorage.getItem(key) <br>
    <strong>删除数据：</strong> <br>
    localStorage.removeItem(key)
</p>
<hr>
<p>
    额外说明: <br>
    本地存储只能存储字符串数据类型, 也就是是 '键'，'值',的数据类型都是字符串 <br>
    如果需要其他类型,需要转换数据类型 注意!!!
</p>


<script>
    // 1. 要存储一个名字  '姓名'， '孙新罡'
    // localStorage.setItem('键'，'值')
    localStorage.setItem('姓名', '孙新罡')
    localStorage.setItem('姓名2', '幻影')

    // 2. 获取数据 ,             括号里的是 '键'
    console.log( localStorage.getItem('姓名2') ) // 控制输出数据

    // 3. 删除本地存储,     括号里的是 '键'
    // localStorage.removeItem('姓名')

    // 4. 改  如果原来有这个键，则是改，如果没有这个键是增加
    localStorage.setItem('姓名2', 'red老师') // ('键'，'值')
    localStorage.setItem('uname', '新建的') // ('键'，'值')
</script>
</body>
</html>